<template>
  <div class="header-container">
<!--    头部-->
 <!--     <nav class="navbar">
        <div>  <p class="navbar-text navbar-left navbar-invers">
          <img src="../assets/img/face.jpg" width="100px" height="100px">
          <span class="text">简心</span>
          <a href="#" class="navbar-link">（JX）</a>
        </p></div>
        <div> <h3>JX（本站寄语）</h3>
          <p class="text">
            在我如此渴望一个笑容，<br>
            期待一篇好文章时，<br>
            你就刚好经过，<br>
            没有早一步，<br>
            没有晚一步，<br>
            我想知识就在我身边，<br>
            那是怎样的幸福。
          </p></div>
        <div class="text">{{this.user.get('username')}}欢迎你的到来</div>
      </nav>-->
 <!--   <div class="navbar">
       <div>
         <img src="../assets/img/title.png"   height="200px" width="240px" alt="">
         <span>—— ——</span>
         <img src="../assets/img/title2.png" alt="">
       </div>
        <div class="dtl31 jumbotron ">
          <img src="../assets/img/back.gif" width="300px" height="100px">
          <div class="dtl">
            <h3>JX（本站寄语）</h3>
            <p class="text">
              在我如此渴望一个笑容，<br>
              期待一篇好文章时，<br>
              你就刚好经过，<br>
              没有早一步，<br>
              没有晚一步，<br>
              我想知识就在我身边，<br>
              那是怎样的幸福。
            </p>

          </div>
        </div>
    </div>
-->
    <!--导航栏-->
        <div class="grid-content bg-purple-dark ">
          <el-menu :router="true" :default-active="active" class="el-menu header" mode="horizontal" @select="handleSelect">
            <el-menu-item class="logo" index="/" v-if="user">xj</el-menu-item>
            <el-menu-item class="logo" index="/" v-else>JX</el-menu-item>
            <el-menu-item index="/article?type=all">
              <span class="logo">
                <i class="fa fa-flag" aria-hidden="true"></i>&nbsp;&nbsp;查阅
            </span>
            </el-menu-item>
          </el-menu>

        </div>
    <div class="middle">

      <!--左边导航栏-->

        <el-col :span="4" class="left">
          <el-menu default-active="active"
                   :router="true"
                   class="el-menu-vertical-demo"
                   background-color="#545c64"
                   text-color="#fff"
                   theme="dark">
            <template v-if="user">
              <el-submenu index="1" class="down">
                <template slot="title"><span class="glyphicon glyphicon-user"></span>个人中心</template>
                <el-menu-item-group title="文章">
                  <el-menu-item  index="/article?type=me">我的文章</el-menu-item>
                  <el-menu-item  index="/article/create">发布文章</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="社交">
                  <el-menu-item index="friend">朋友圈</el-menu-item>
                  <el-menu-item index="/followee">我的关注</el-menu-item>
                  <el-menu-item index="/follower">粉丝</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="me" :route="{ name:'User', params:{ id : user.id }}"><sapn class="glyphicon glyphicon-cloud"></sapn>&nbsp;&nbsp;我的动态</el-menu-item>
              <el-menu-item index="me" :route="{ name:'setUserInfo', params:{ id : user.id }}"><sapn class="glyphicon glyphicon-cloud"></sapn>&nbsp;&nbsp;编写资料</el-menu-item>
              <el-menu-item index="/message"><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;消息</el-menu-item>
              <li class="el-menu-item" @click="heandleExit"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</li>
              <div class="men-info">
              <span v-for=" img in this.user.get('avatar')">
                <img v-lazy="img" alt="" width="68" height="68" class="img Rotation">
              </span>
                <div class="name">
                  <span><i class="fa fa-user-o" aria-hidden="true"></i> :{{this.user.get('username') ? this.user.get('username') :'未填写'}}</span>
                  <span><i class="fa fa-envelope-o" aria-hidden="true"></i>:{{this.user.get('email') ? this.user.get('email') :'未填写'}} </span>
                  <span><i class="fa fa-file-text" aria-hidden="true"></i>:{{this.user.get('note')? this.user.get('note'):'未填写'}}</span>
                </div>
              </div>
            </template>
            <template v-else>
              <el-menu-item index="/signUp"  exact><i class="fa fa-user-o" aria-hidden="true"></i> 注册</el-menu-item>
              <el-menu-item index="/signIn" ><i class="fa fa-key" aria-hidden="true"></i> 登陆</el-menu-item>
            </template>
          </el-menu>
        </el-col>
        <!--右边内容-->
        <el-col :span="20" class="right">
          <transition enter-active-class="slideInLeft" leave-active-class="slideOutRight" mode="out-in"  :duration="500">
            <router-view></router-view>
          </transition>

        </el-col>
    </div>
    <div class="footer">
      Design by：Why
    </div>
<!--    <el-row>
      <footer class="main-footer">
        <div>
          <el-row>
            <el-col :span="8">
              <div class="widget">
                <h4 class="title">友情链接</h4>
                <div class="content friend-links">
                  <a href="http://www.bootcss.com/" title="Bootstrap中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'Bootstrap中文网'])" target="_blank">Bootstrap中文网</a>
                  <a href="http://www.golaravel.com/" title="Laravel中文网" onclick="_hmt.push(['_trackEvent', 'link', 'click', 'Laravel中文网'])" target="_blank">Laravel中文网</a>
                </div>
              </div>
            </el-col>

            <el-col :span="8">
              <div class="widget">
                <h4 class="title">我用到的技术</h4>
                <div class="content tag-cloud">
                  <a href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"  target="_blank">
                    图标</a>
                  <a href="https://leancloud.cn/docs/leanstorage_guide-js.html" target="_blank">数据库</a>
                  <a href="">wangEditor 富文本编辑器</a>

                </div>
              </div>
            </el-col>

            <el-col :span="8">
              <div class="widget">
                <h4 class="title">作者</h4>
                <div class="content friend-links">
                  &lt;!&ndash;<h5>姓名：张洁</h5>
                  <h5>Tel:15320217685</h5>&ndash;&gt;
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </footer>
    </el-row>-->
  </div>


</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {

    name: 'Header',
    data() {
     /* const id = this.$route.params.id;*///当前用户的参数
      return {
        active: '/',
        current_user:null,
      };
    },
    created(){//防止路由高亮
  /*    this.getCurrentUser();*/
      this.active = this.$route.path;
      this.$router.afterEach((to,from) => {
        this.active = to.path;
      });
    },
    computed: mapState(['user']),//mapState 是将 Vuex 里面的状态映射到组件上面去。
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      ...mapActions(['exit']),
      heandleExit(){
        this.exit();
        this.$api.SDK.User.logOut() // SDK 的退出
        this.$message.success('成功退出');
        this.$router.push({path: '/signIn'});
      },
    }
  };


</script>

<style lang="less" scoped>
  @import '../assets/css/stylesCode.css';
  @import "~vue2-animate/src/vue2-animate.less";
  .header-container{
    margin: 0 auto;
    text-align: center;
   /* background: #a9bbc0;*/
    background-color: #2e2a29;
    width: 100%;
    font-family: 'Montserrat-Regular', 'STYuanti-SC-Regular', 'hyppt';
    .navbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffc;
      margin-bottom: 0!important;
      .jumbotron{
        width: 300px;
        height:200px;
        background-size: 100% 100%;
        background-size: 100% 100%;
        background-size: 100% 100%;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .dtl31 img{
        height:200px;
        width: 300px;
      }
    }
    .grid-content{
      border-radiu:12px;
      .el-menu{
        background-color: #2d3e59;
        background-image: url("../../static/img/left.gif");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radiu:25px;
        color: #ffffff;
        .logo{
          color: #ffffff;
          font-size: 20px;
          font-weight: bolder;
        }
        .logo:hover{
          color: black;
          font-size:20px;
          font-weight: bolder;
        }
      }
    }
    .middle{
      display: flex;
    /*  background-color: #66919c;*/
      .left{
        background-color:#2d3e59;
        background-image: url("../../static/img/left.gif");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        .men-info{
          margin: 10px;
          border: 1px solid #cccccc;
          padding: 10px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: white;
          letter-spacing: 0;
          text-align: center;
          .img{
            border-radius: 100%;
          }
          .name{
            width: 100%;
            margin-top: 10px;
            margin-left:10px;
            text-align: left;
          }
          .name span{
            display: block;
          }
        }
      }
      .right{
        background-color:#f5f5f5 ;
        padding-bottom: 20px;
        height: 800px;
        overflow: scroll;
        overflow-x: hidden;
      }
    }
    .footer {
    /*  z-index: 2;*/
      background-image: url("../../static/img/left.gif");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      clear: both;
      line-height: 36px;
      text-align: center;
      color: #b6b6b6;
      background-color: #ffffff;
      border-top: 1px solid #d6dfea;
    }
  }
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
  }
  @-webkit-keyframes liner{
    from {-webkit-transform: translateX(10px);}
    to {-webkit-transform: translateX(100px);}
  }
  .Rotation{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }
.title{
  -webkit-transform: translateX(5px);
  animation: liner 3s linear infinite;
  -moz-animation: liner 3s linear infinite;
  -webkit-animation: liner 3s linear infinite;
  -o-animation: liner 3s linear infinite;
}

</style>
